import React, { useState,useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import MyTabBar from '../../components/MyTabBar'
import Notice from '../../components/Notice'
import Note from '../../components/Note'
import { Button, Divider,Tabs } from 'antd-mobile'
import { getPetList,getPublishSum} from '../../api/pet'
import pcHeader from '../../image/headerSpider.png'
import petCheck from '../../image/petCheck.png'
import petLost from '../../image/petLost.png'
import petFind from '../../image/petFind.png'
import petShop from '../../image/petShop.jpg'
import './index.css'
export default function Home() {
  const [petList,setPetList] = useState([]);
  const [petSum, setPetSum] = useState(0);
  useEffect(()=>{
    //获取宠物列表数据
    async function fetchData(){
      const {data, status} = await getPetList()
      if(status === 0){
        setPetList(data)
      }
    }
    //获取发布量
    async function fetchPetSum(){
      const {data, status} = await getPublishSum()
      if(status === 0){
        setPetSum(data)
      }
    }
    fetchData()
    fetchPetSum()
  },[])
  const navigate = useNavigate()

  const goDetail = (petinfo) => {
    navigate('/pet_detail',{state: petinfo})
   }

   const LinkTo = (url)=>{
      navigate(url)
   }
  const funObj = [
    { id: 1, img: petFind, name: '寻宠公益', url: '/community' },
    { id: 2, img: petCheck, name: '宠物检测', url: '#' },
    { id: 3, img: petLost, name: '宠物防丢', url: '/petcard' },
    { id: 4, img: petShop, name: '给我留言', url: '/comment' },
  ]
 
  return (
    <div className="home-container">
      <div className="home-header">
        <div className="header-titile">
          <div>让您省心的宠物防丢卡</div>
          <div style={{ fontWeight: 'normal', fontSize: '16px' }}>一宠一码 寻宠神器</div>
          <Button size='small' style={{ color: '#e79e00', fontWeight: 'bold' }} >免费领取</Button>
        </div>
        <div>
          <img src={pcHeader} alt="宠物" />
        </div>
      </div>

      <div className="home-tab">
        {
          funObj.map((item, index) => {
            return <div
              key={item.id}
              style={{ width: '25vw', fontWeight: 'bold' }}
            >
              <img src={item.img} style={{ width: '10vw', borderRadius: '50%' }} alt="照片" onClick={()=>{
                LinkTo(item.url)
              }}/>
              <div>{item.name}</div>
            </div>
          })
        }
      </div>
       
      <div className="home-science">
        <div className='science-item1' onClick={()=>{navigate('/dog_advice')}}>
          <div >新手养什么狗?</div>
          <span style={{ backgroundColor: '#fbf1b6', fontWeight: 'normal', fontSize: '1rem' }}>#新手养宠科普 </span>
        </div>

        <div className='science-item2' onClick={()=>{navigate('/cat_advice')}}>
          <div>新手养什么猫?</div>
          <span style={{ backgroundColor: '#fbf1b6', fontWeight: 'normal', fontSize: '1rem' }}>#新手养宠科普 </span>
        </div>
      </div>

      <div className="home-notice">
        <Notice petSum={petSum} watchSum = '250' />
      </div>
      <Divider />
      <div className='home-tabs' >
        {/* <ul>
          <li>全国</li>
          <li>附近</li>
          <li>筛选</li>
        </ul> */}

          <Tabs>
            <Tabs.Tab title='附近' key='nearby'>
            </Tabs.Tab>
            <Tabs.Tab title='全部' key='all'>
            </Tabs.Tab>
          </Tabs>
          
        <div className="notes">
          {
            petList.map((item,index) => {
                // return <Note  key={item.id}></Note>
                return <Note 
                  onClick={()=>{
                    goDetail(item)
                  }}
                  avatar={item.pet_avatar} 
                  name={item.name} 
                  gender = {item.pet_gender ? '弟弟': '妹妹'}  
                  key={item.id}
                  age={item.pet_age}
                  position={item.position}
                  tag='信任领养'
                  >
                </Note>
            })
          }
        </div>
        
      </div>
      <MyTabBar />
    </div>
  )
}
